import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Input, ScrollView } from '@tarojs/components'
import { debounce } from '@/utils'
import StoreListView from '@/components/StoreListView'
import Iconfont from '@/components/Iconfont'
import { allStore } from '@/api'
import './index.scss'

interface State{
    keyWordStore: IStore[]
    allStoreList: IStore[]
}

export default class Index extends Component<State> {
    $instance = getCurrentInstance();

    constructor () {
        super(...arguments)
        this.state = {
            keyWordStore: [],
            allStoreList: []
        }
    }

    state: State

    UNSAFE_componentWillMount() {}
    componentDidMount() {
        this.getAllStore()
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {}
    componentWillUnmount() {}
    componentDidShow() {}
    componentDidHide() {}
    componentDidCatchError() {}
    componentDidNotFound() {}
    changeStore(list) {
        Taro.setStorageSync('STAFF_STORE', {
            storeCode: list.storeCode,
            storeName: list.storeName
        })
        Taro.reLaunch({
            url: '/pages/topush/index/index'
        })
    }
    // 搜索
    searchLocation = debounce((e) => {
        const { value: keyword } = e.detail
        const vendorCode = this.$instance.router.params.vendorCode
        allStore({
            keyword,
            query: {
                filter: {
                    and: [{ vendorCode }]
                }
            }
        }).then(res => {
            const data = res.data.data
            this.setState({
                keyWordStore: data
            })
        })
    }, 400)
    // 搜索门店界面
    keywordStoreView() {
        const { keyWordStore } = this.state
        const { storeCode } = this.$instance.router.params
        return keyWordStore.length && (
            <View className='keyword-store-content'>
                {
                    keyWordStore.map(list => {
                        const isChecked = list.storeCode === storeCode
                        return (
                            <View className='store-wrap' key={list.id}>
                                <StoreListView hideDistance handleEvent={() => this.changeStore(list)} list={list} />
                                <View className='check'>
                                    { isChecked ? <Iconfont size='44' color='#12B3FF' name='icon-gouxuan-gouxuanxuanzhong' /> : <View className='border'></View>}
                                </View>
                            </View>
                        )
                    })
                }
            </View>
        )
    }
    // 全部门店界面
    allStoreView() {
        const { allStoreList } = this.state
        const { storeCode } = this.$instance.router.params
        return  (
            <ScrollView lowerThreshold={120} scrollY onScrollToLower={(e) => this.addAllStore(e)} className='otfen-store show'>
                {
                    allStoreList.length && (
                        <View className='otfen-list'>
                            <View className='sub-title'>可用门店</View>
                            {
                                allStoreList.map(list => {
                                    const isChecked = list.storeCode === storeCode
                                    return (
                                        <View className='store-wrap' key={list.id}>
                                            <StoreListView hideDistance handleEvent={() => this.changeStore(list)} list={list} />
                                            <View className='check'>
                                                { isChecked ? <Iconfont size='44' color='#12B3FF' name='icon-gouxuan-gouxuanxuanzhong' /> : <View className='border'></View>}
                                            </View>
                                        </View>
                                    )
                                })
                            }
                        </View>
                    )
                }
            </ScrollView>
        )
    }
    private addAllStoreStatus = false
    private allStorePage: number = 1
    async addAllStore(e) {
        if (!this.addAllStoreStatus) {
            this.allStorePage ++
            this.addAllStoreStatus = true
            await this.getAllStore()
            this.addAllStoreStatus = false
        }
    }
    // 全部门店
    getAllStore() {
        // const { location } = params || this.state
        const vendorCode = this.$instance.router.params.vendorCode
        allStore({
            // userLongitude: location.location.lng,
            // userLatitude: location.location.lat,
            query: {
                page: this.allStorePage,
                filter: {
                    and: [{ vendorCode }]
                }
            }
        }).then(res => {
            const data = res.data.data
            const { allStoreList } = this.state
            if (allStoreList.length) {
                this.setState({
                    allStoreList: [...allStoreList, ...data]
                })
            } else {
                this.setState({
                    allStoreList: [...data]
                })
            }
        })
    }
    render() {
        return (
            <View className='store-index'>
                <View className='store-main vendor-store'>
                    <View className='store-index-fixed'>
                        <View className='import-keywords'><Input placeholder-class='placeholder' onInput={(e) => this.searchLocation(e)} className='ipt' placeholder='输入门店名称、地址或区域'></Input></View>
                    </View>
                    {this.allStoreView()}
                    {this.keywordStoreView()}
                </View>
            </View>
        )
    }
}
